<template>
  <div class="filter-form">
    <div class="filter-form-filter">
      <modal-form
        :formData="filterData"
        :isFlex="true"
        ref="formData"
      ></modal-form>
      <el-button type="primary" @click="search">查询</el-button
      ><el-button @click="clear">清除</el-button>
    </div>
  </div>
</template>

<script>
import ModalForm from "@/components/modal-form.vue";

export default {
  name: "filter-form",
  components: {
    ModalForm,
  },
  data() {
    return {};
  },
  props: {
    filterData: {
      type: Array,
      default: undefined,
    },
  },
  methods: {
    search() {
      this.$emit("search-filter", this.$refs.formData.formDataObject);
    },
    clear() {
      this.$refs.formData.remove();
      this.$emit("search-filter", this.$refs.formData.formDataObject);
    },
  },
};
</script>
<style lang="less" scoped>
.filter-form-filter {
  padding: 15px 0;
}
/deep/.filter-form-filter .modal-form-flex {
  justify-content: flex-start;
}
/deep/.filter-form-filter .modal-form-flex .modal-form-flex-item {
  width: 25%;
}
</style>
